<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" type="text/css" href="css/xiangqing.css" />
    <title></title>


</head>

<body>
    <div class="header">
        <div class="header-con">
            <div class="header-first">
                <ul>
                    <li><a href="" class="first">amigo账号登录</a></li>
                    <li><a href="http://10.35.162.123/jinlixiangmu/denglu.html">原账号登录</a></li>
                    <li><a href="http://10.35.162.123/jinlixiangmu/zhuce.html">注册</a></li>
                    <li><a href="" class="iconfont icon-gouwuche last">购物车(0)</a> 您的购物车是空的，快去挑选喜欢的商品吧！

                    </li>
                </ul>
            </div>
            <img src="img/images/1_03.png" />
            <div class="login">
                <ul>
                    <li><a href="http://10.35.162.123/jinlixiangmu/index.html">首页</a></li>
                    <li><a href="" class="titt">手机</a></li>
                    <li><a href="">配件</a></li>
                    <li><a href="">服务</a></li>
                    <li><a href="">下载</a></li>
                    <li><a href="">amigoOS</a></li>
                    <li class="dactor"><input id="goid" placeholder="输入搜索内容" />
                        <a href="" class="iconfont icon-search"></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div id="acount">
        <div id="acount-con">
            <div id="imgList">
                <img id="img1" src="img/images/1335_P_1506130537783.jpg" onclick="imgClick(this)" />
                <img id="img2" src="img/images/1335_P_1506130890924.jpg" onclick="imgClick(this)" />
                <img id="img3" src="img/images/1335_P_1506130893973.jpg" onclick="imgClick(this)" />
                <img id="img4" src="img/images/1335_P_1506130891790.jpg" onclick="imgClick(this)" />
                <img id="img5" src="img/images/1335_P_1506130892840.jpg" onclick="imgClick(this)" />

            </div>

            <div class="min">
                <img id="imgShow" src="img/images/1335_P_1506130537783.jpg" />
                <div class="fd"></div>
            </div>

            <div class="max">
                <img src="http://10.35.162.123/jinlixiangmu/img/images/1335_P_1506130537783.jpg" alt="" id="back">
            </div>







            <div id="right">
                <div id="total-top">
                    <h2 class="one1">大金刚2</h2>
                    <p class="two2">6.0英寸高清全面屏</p>
                </div>
                <div id="total-count">
                    <span class="jiage">现&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价:&nbsp;&nbsp;&nbsp;</span>
                </div>

                <div id="total-foot">
                    <span class="colors">颜&nbsp;&nbsp;&nbsp;色：&nbsp;&nbsp;黑色/&nbsp;白色/&nbsp;&nbsp;金色</span>
                </div>

                <div id="gopay">
                    <button class="minus">-</button>
                    <span class="num">0</span>
                    <button class="add">+</button>
                </div>



                <button type="button" class="btnn"><a href="dingdan.html">加入购物车</a></button>



            </div>
        </div>
    </div>

    <div id="total-counter">
        <h2 class="titls">产品详情</h2>
        <p class="jieshao">在确保机身5.5英寸舒适握感的同时，大金刚2融入了一块6.0英寸高清全面屏。18:9修长比列，超大屏占比，完全颠覆了我们对于手机的想象。点亮屏幕的一瞬间，100多万颗像素几乎铺满整个前面板，无论是电影还是游戏，你都会被大金刚2身临其境般屏幕效果所吸引。</p>
    </div>



    <div id="lasts">
        <div id="lasts-con">
            <ul>
                <li><img src="img/images/D-_userAJAX_htdocs_二生三_img_金立_03.png"></li>
                <li><img src="img/images/金立_04.png"></li>
                <li><img src="img/images/D-_userAJAX_htdocs_二生三_img_金立_03.png"></li>
                <li><img src="img/images/金立_04.png"></li>
            </ul>
        </div>
    </div>
    <div class="fonterr">
        <div class="fonterr-con">
            <div class="one">
                <h5>关于金立</h5>
                <p>企业荣誉</p>
                <p>金立体验店</p>
                <p>代理商专区</p>
                <p>加入金立</p>
                <p>联系我们</p>
                <p>供应/服务商需求咨询</p>
            </div>
            <div class="two">
                <h5>新闻咨询</h5>
                <p>公司新闻</p>
                <p>媒体报道</p>

            </div>
            <div class="three">
                <h5>购物指南</h5>
                <p>购物流程</p>
                <p>支付方式</p>
                <p>配送说明及费用</p>
                <p>订单管理</p>
                <p>购买常见问题</p>
                <p>预置应用公示</p>
            </div>
            <div class="four">
                <h5>售后服务</h5>
                <p>售后政策</p>
                <p>售后服务网点</p>
                <p>上门维修</p>
                <p>签收须知</p>
                <p>物流查询</p>
            </div>
            <div class="five">
                <h5>关注我们</h5>
                <p class="iconfont icon-weibo">&nbsp;新浪微博</p>
                <p class="iconfont icon-tengxunweibo">&nbsp;腾讯微博</p>
                <p class="iconfont icon-qzone">&nbsp;QQ空间</p>

            </div>
            <img src="img/images/code.png" />
            <span>扫一扫关注微信</span>
        </div>
    </div>


    <div id="zuihou-con">
        <div id="zuihou">
            <ul>
                <li><span class="one">网站地图&nbsp;&nbsp;|</span><span>&nbsp;&nbsp;集团下属公司</span></li>
                <li>增值电信业务经营许可证：粤B2-20120350 粤ICP备05087105号 粤文网[2018]10835-3804号 粤文审[2012]196号</li>
                <li>Copyright &copy;2013 深圳市金立通信设备有限公司 版权所有.</li>
            </ul>
            <div id="imgs">
                <img src="img/images/sf.png">
                <img src="img/images/govIcon.gif" class="two">
                <img src="img/images/b.png">
            </div>
            <div class="last">中国/简体中文+</div>
        </div>
    </div>
</body>

</html>
<script src="jquery.min.js"></script>
<script src="node.js"></script>
<script type="text/javascript">
    // 购物车
    let count = $(".num").html()
    let num = Number(count)
    $(".add").click(function() {
        num = num + 1
        $(".num").html(num)
    })

    $(".minus").click(function() {
        if (num <= 0) {
            return 0
        }
        num = num - 1
        $(".num").html(num)
    })



    $.ajax({
        url: "http://10.35.162.123:8080/getxiangqing",
        success: function(data) {
            let list = JSON.parse(data);
            list.forEach(function(item) {

                $("#top").attr("src", item.pic)
                $("#bottom").attr("src", item.pics)
                $(".one1").html(item.title)
                $(".two2").html(item.text)
                $(".jiage").html("现价" + item.price)
                $(".colors").html(item.colors)
                $(".titles").html(item.titles)
                $(".jieshao").html(item.details)
                $(".btnn").click(function() {
                    let title = item.title;
                    let price = item.price;
                    let num = $(".num").html()
                    let id = item.id
                    $.ajax({
                        url: `http://10.35.162.123:8080/getnum?title=${title}&price=${price}&num=${num}&id=${id}`,

                        success: function(data) {
                            // location.href = "http://10.35.162.123/jinlixiangmu/dingdan.html"
                        }
                    })
                    id = item.id
                    $.ajax({
                        url: `http://10.35.162.123:8080/clickdata?id=${id}`,

                        success: function(data) {}
                    })
                })
            })
        }
    })
</script>








<script>
    function imgClick(img) {
        $("#imgShow").attr('src', img.src);

        $("#back").attr('src', img.src);

    }
</script>


</html>
<!-- 放大镜 -->
<script>
    let min = document.querySelector(".min");
    let max = document.querySelector(".max");
    let img = document.querySelector(".max img");
    let fd = document.querySelector(".fd");

    min.onmouseover = function() {
            //                1.鼠标覆盖显示max和fd
            max.style.display = "block";
            fd.style.display = "block";
        }
        //            离开时隐藏
    min.onmouseout = function() {
            max.style.display = "none";
            fd.style.display = "none";
        }
        //            2. fd的移动范围
    min.onmousemove = function() {
        //                鼠标触摸的点
        var x = event.clientX - min.offsetLeft - fd.offsetWidth / 2;
        var y = event.clientY - min.offsetTop - fd.offsetHeight / 2;
        //                最大移动距离
        var maxX = min.clientWidth - fd.offsetWidth;
        var maxY = min.clientHeight - fd.offsetHeight;
        //                边界判断
        if (x <= 3) {
            x = 3;
        } else if (x >= maxX) {
            x = maxX;
        }
        if (y <= 3) {
            y = 3;
        } else if (y >= maxY) {
            y = maxY;
        }
        //                fd的位置
        fd.style.left = x + 'px';
        fd.style.top = y + 'px';
        //fd/min = max/img
        //移动比例
        var moveX = x / maxX;
        var moveY = y / maxY;
        //                移动
        //                3. max的对应显示
        //                对于大图而言,放大镜在小图上移动的比例相当于img在可显示区域上移动的比例
        //                放大镜右移等于图片左移
        //                也就是本质上为img-max 然而而需要负值,则*-1简化后为max-img
        img.style.left = moveX * (max.clientWidth - img.offsetWidth) + 'px';
        img.style.top = moveY * (max.clientHeight - img.offsetHeight) + 'px';

    }
</script>